2.5 APIs (navigator)

Las APIs de los navegadores permiten a los desarrolladores hacer cosas como:

• Acceder a la geolocalización del usuario.
• Acceder a la cámara y al micrófono del usuario.
• Leer y escribir cookies.
• Acceder al historial de navegación del usuario.
• Acceder a la información del sistema operativo.
• Acceder al almacenamiento local.
• Acceder a la información de la red.
• Acceder a la información de la batería.
• Acceder a la información de la pantalla.
• Acceder a la información de la GPU.
• Acceder a la información de la CPU.
• Acceder a la información de la memoria

Aquí tienes una lista de algunas de las APIs más comunes del navegador, junto con ejemplos sencillos para cada una:

1. DOM (Document Object Model)

Permite manipular la estructura HTML de una página.

Ejemplo:

document.getElementById("miElemento").innerText = "Hola, Mundo!";

2. Fetch API

Proporciona una forma sencilla de realizar solicitudes HTTP.

Ejemplo:

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

3. Local Storage

Permite almacenar datos en el navegador de manera persistente.

Ejemplo:

localStorage.setItem('nombre', 'Juan');
console.log(localStorage.getItem('nombre')); // Juan

4. Session Storage

Similar a Local Storage, pero los datos se eliminan cuando se cierra la pestaña.

Ejemplo:

sessionStorage.setItem('sesion', 'activa');
console.log(sessionStorage.getItem('sesion')); // activa

5. Cookies

Permite almacenar datos en el navegador en forma de cookies.

Ejemplo:

document.cookie = "usuario=Juan; expires=Fri, 31 Dec 2024 23:59:59 GMT";

6. Geolocation API

Permite acceder a la ubicación geográfica del usuario.

Ejemplo:

navigator.geolocation.getCurrentPosition(position => {
    console.log(`Latitud: ${position.coords.latitude}, Longitud: ${position.coords.longitude}`);
});

7. Web Storage API

Incluye Local Storage y Session Storage para almacenar datos.

Ejemplo:

// Almacenar un objeto
const user = { name: 'Juan', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// Recuperar el objeto
const retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser.name); // Juan

8. Canvas API

Permite dibujar gráficos en un área definida.

Ejemplo:

<canvas id="miCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('miCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
</script>

9. WebSockets

Permite la comunicación bidireccional en tiempo real entre el cliente y el servidor.

Ejemplo:

const socket = new WebSocket('wss://example.com/socket');
socket.onmessage = event => {
    console.log('Mensaje del servidor:', event.data);
};

10. Web Workers

Permite ejecutar scripts en segundo plano sin bloquear el hilo principal.

Ejemplo:

const worker = new Worker('worker.js'); // archivo worker.js
worker.postMessage('Hola, worker!');
worker.onmessage = function(e) {
    console.log('Mensaje del worker:', e.data);
};

11. Media Devices API

Permite acceder a dispositivos multimedia como cámaras y micrófonos.

Ejemplo:

navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
        const video = document.querySelector('video');
        video.srcObject = stream;
    })
    .catch(error => console.error('Error al acceder a la cámara:', error));

12. Notification API

Permite mostrar notificaciones en el escritorio.

Ejemplo:

if (Notification.permission === 'granted') {
    new Notification('Hola', { body: 'Este es un mensaje de notificación.' });
} else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
            new Notification('Hola', { body: 'Este es un mensaje de notificación.' });
        }
    });
}

13. Service Workers

Permite la creación de aplicaciones web offline y mejorar la experiencia del usuario.

Ejemplo:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => console.log('Service Worker registrado con éxito:', registration))
            .catch(error => console.log('Error al registrar el Service Worker:', error));
    });
}

14. History API

Permite manipular el historial del navegador.

Ejemplo:

history.pushState({ page: 1 }, 'Título de la página', 'pagina1.html');

15. Clipboard API

Permite interactuar con el portapapeles del usuario.

Ejemplo:

navigator.clipboard.writeText('Texto copiado!')
    .then(() => console.log('Texto copiado al portapapeles'))
    .catch(err => console.error('Error al copiar al portapapeles:', err));